<template>
    <div class="top">
        <div class="head"> <img
                src="https://img.axureshop.com/ee/00/de/ee00de2201bf478bb4a9d4f881afd706/images/设备管控-设备列表/u3407.png"
                @click="returnPage" />
            <span
                style="font-size: 20px;font-family: '微软雅黑 Regular';font-weight: bold; margin-left: 5px;margin-right: 140px;">一卡通充值
            </span>
            <span
                style="font-size: 16px;font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';font-weight: bold; margin-top: 5px;"
                @click="addText">在线充值</span>
        </div>
        <div class="center">￥{{ count }}</div>
        <div class="current">当前余额</div>
    </div>
    <div class="contain">
        <div
            style="color: black; font-size: 14px;font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';font-weight: bold; margin-left: 10px;">
            消费记录</div>
        <div
            style="color: black; font-size: 14px;font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';font-weight: bold; margin-right: 10px;">
            {{ year }}年{{ month }}月</div>
    </div>
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" offset>
        <van-cell v-for="item in list" :key="item">

            <div class="list-item">
                <div class="list-left">
                    <div id="left-title1">{{ item.month }}</div>
                    <div id="left-title">{{ item.time }}</div>
                </div>
                <div class="list-center">
                    <div id="left-title1">{{ item.thing }}</div>
                    <div id="left-title">订单号：{{ item.id }}</div>
                </div>
                <div :class="{ 'pink-color': item.inout === '-', 'blue-color': item.inout !== '-' }">
                    {{ item.inout }}{{ item.money }}
                </div>
            </div>
        </van-cell>
    </van-list>
</template>


<script setup >
import { useRouter } from "vue-router"
import { ref, onMounted } from "vue"
import { countApi, cardListApi } from "../../api/application"
import adminStore from "@/store/admin"
const myadminStore=adminStore()
const router = useRouter()
const returnPage = () => {
    router.replace('/application')
    myadminStore.setUserInfo(true)

}
const count = ref('')
const year = ref('')
const month = ref('')
const list = ref([]);
const loading = ref(false);
const finished = ref(false);
onMounted(async () => {
    let ret = await countApi()
    if (ret.code === 0) {
        count.value = ret.data.count
        year.value = ret.data.year
        month.value = ret.data.month

        // console.log(count.value);
    }
})

const onLoad = async () => {
    // 异步更新数据
    // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    let ret = await cardListApi()
    if (ret.code === 0) {
        list.value = ret.data
        console.log(list.value);
          finished.value = true;

    }


    //     // 加载状态结束
    //     loading.value = false;

    //     // 数据全部加载完成
    //     if (list.value.length >= 40) {
    //       finished.value = true;
    //     }

};
</script>
<style lang='scss' scoped>
.top {
    height: 270px;
    background-color: rgba(108, 182, 255, 1);

}

.head {
    display: flex;
    height: 40px;
    padding-top: 20px;
    padding-left: 5px;
    margin-bottom: 50px;
    color: white;
    img {
        margin-top: 5px;
        width: 40px;
        height: 10px;
        margin-right: 10px;
        color: white;
    }
}

.center {
    margin: 0 auto;
    width: 90%;
    text-align: center;
    color: white;
    font-size: 28px;
    font-family: "微软雅黑";
    font-weight: bold;
}

.current {
    font-size: 13px;
    text-align: center;

    color: white;
}

.contain {
    display: flex;
    justify-content: space-between;
    height: 50px;
    line-height: 50px;
    text-align: center;



    #left-title {
        text-align: left;

    }
}

.list-item {
    display: flex;
}

.list-left {
    width: 70px;
    height: 60px;
}

.list-center {
    width: 225px;
    height: 60px;
}

.list-right {
    width: 80px;
    height: 60px;
    line-height: 60px;
}

#list-title {
    font-size: 18px;
}


.pink-color {
    color: #F89AD8;
}

.blue-color {
    color: #6CB6FF;
}
</style>

